<template>
	<view>
		<view class="content">
			<view>
				<button style="width: 160rpx; height: 160rpx; padding:0px; " class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image style="width: 160rpx; height: 160rpx; " class="avatar" :src="avatarUrl"></image>
				</button>
		
			 </view>
			 <view style="height: 100rpx;">
				<input type="nickname" class="weui-input" :value="nickname" @blur="bindblur"
								placeholder="请输入昵称" @input="bindinput"/>
			</view>
		<!-- 	<button class="ft_16 con_3 but" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" @getphonenumber='getphonenumber1'>手机号授权登录</button> -->
			<button class="ft_16 con_3 but" @click="getUserProfile()">
				授权登录
			</button>
			<button class="ft_16 con_3 but" style="background-color: #bbbeb5; margin-top: 5px;" @click="cancel()">
				取消授权
			</button>
			
			
		</view>
		<!-- 获取手机号弹窗 -->
		<!-- <u-popup v-model="show" mode="center" border-radius="14" :mask-close-able="false">
			<view class="display juzhong popup">
				<view class="p_bottom_10 ft_16">
					提示
				</view>
				<view class="">
					需要获取您的手机号绑定小程序
				</view>
				<view class="display" style="padding-top: 20px;width: 100%;">
					<view class="" style="width: 50%;text-align: center;" @click="cancel">
						取消
					</view>
					<button open-type="getPhoneNumber" @getphonenumber="getphoneNumber" >
						确认
					</button>
				</view>
			</view>
		</u-popup> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				show:false, //手机号弹窗
				pid:"",//邀请人id
				userinfo:"", //用户信息
				
				type:"", //分享登录
				avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickname:'',
			}
		},
		onLoad(e) {
			if(this.$all.getData('pid')){
				this.pid=this.$all.getData('pid')
			}
			console.log(this.$all.getData('pid'));
			if(e.type){ //分享登录
				this.type=e.type
			}
			if(uni.getStorageSync('nickname')!=undefined&&uni.getStorageSync('nickname')!=''){
				this.nickname=uni.getStorageSync('nickname');
			}
			if(uni.getStorageSync('avatarUrl')!=undefined && uni.getStorageSync('avatarUrl') != ''){
				this.avatarUrl=uni.getStorageSync('avatarUrl');
			}
		},
	
		methods: {
			bindblur(e) {
							this.nickname = e.detail.value; // 获取微信昵称
						},
						bindinput(e){
							this.nickname = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			
			},
			onChooseAvatar(e){
				console.log(e)
				this.avatarUrl = e.detail.avatarUrl;
				var _ss=this;
				uni.uploadFile({
					url:'https://ycxkz.chentu.fun/api/common/upload',
					name:'file',
					filePath:this.avatarUrl,
					success(res){
						var data = JSON.parse(res.data);
						console.log(data)
						console.log(data.data.url)
						if(data.code==1){
							_ss.avatarUrl=data.data.url;
						}
					}
				})
			 },
			 getphonenumber1(e){
				 console.log(e,'111111111');
			 },
			 
			getUserProfile() { //小程序登录
				let that=this;
				//var pid = uni.getStorageSync('pid');
				if(this.nickname==''){
					uni.showToast({
						title:'请设置昵称',
						icon:'error'
					})
					return false;
				}
				uni.setStorageSync('nickname',this.nickname);
				uni.setStorageSync('avatarUrl',this.avatarUrl);
				wx.login({
					success(res){
						console.log(res);
						var code=res.code;
						that.$myRequest({
							url: 'api/user/login1',
							method:'POST',
							data:{
								'pid':that.pid,
								'code':code,
								'nickname':that.nickname,
								'avatarUrl':that.avatarUrl
							}
						}).then(res =>{
							console.log(res,'resres');
							if(res.data.code==1){
								uni.setStorageSync('user',res.data.data.userInfo);
								setTimeout(function() {
									uni.reLaunch({
										url:'index/index'
									})
								}, 1000);
							}
						})
					}
				})
			},
			cancel(){ //取消手机号授权
				this.show=false
				uni.showToast({
					title: "您拒绝了授权，将无法进入小程序，请授权之后再进入!",
					icon: "none"
				});
			},
			getphoneNumber222(e){ //获取手机号
			console.log(e,454545787);
				this.$myRequest({
					url: 'api/index/getPhone',
					method:'POST',
					data:{
						sessionKey:this.$all.getData('session_key'),
						encryptedData:e.detail.encryptedData,
						iv:e.detail.iv
					}
				}).then(res => {
					console.log(res.data,123);
					// console.log(this.userinfo);
					if(res.data.code==1){
						console.log(789);
						// this.$all.setData('user',this.userinfo)
						if(this.type==1){ //分享登录
							uni.switchTab({
								url:'index/index'
							})
						}else{
							uni.switchTab({
								url:'index/index'
							})
						}
					}else{
						this.show=false
						this.$all.toast("获取手机号失败，无法登录")
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	margin: 0 30px;
	.avatar{
		//padding: 80px 0;border-bottom: 1px solid #cccccc;
		image{
			width: 80px;
			height: 80px;
		}
	}
	.con_2{
		padding: 30px 0;line-height: 2em;
	}
	.con_3{
		background-color: #1bae1a;border-radius: 30px;color: #FFFFFF;text-align: center;
	}
}

.popup{
	padding: 30px 30px 0;flex-flow: column;line-height: 2em;
	.but{
		background-color: transparent;
		border-radius: 30px;
		padding: 15px 0;
		line-height:1.1em;
		font-size: 14px;
		width: 50%;
		text-align: center;
		color: #efa020;
	}
	button:after{
		border:none;
	}
}
.juzhong{
	justify-content: center;
}
</style>
